import React from 'react';
import { Dropdown, Menu } from '@teamix/ui';
import { Tooltip, ButtonIcon } from '@alife/devops-ui';
import { Link, HrefLink } from 'utils/router';
import utils from 'utils';
import intl from '../../../../../../../../../locale';

const { pathResource, resourceSubject } = window.FORCE;

export default class OtherOption extends React.Component {
  state = {
    dropdownVisible: false,
  };

  menu = () => {
    const { resourcePath, lastCommit, renderType, project_clone_download } = this.props;
    let isDisabledDownload = false;
    if (project_clone_download) {
      isDisabledDownload =
        project_clone_download.downloadLimit &&
        project_clone_download.downloadLimit.state === 'disable';
    }
    return (
      <Menu>
        {renderType === 'TEXT' && (
          <Menu.Item>
            <Link
              to={`/${pathResource.fullPath}/blame/${utils.revisionEncodeURI(
                resourceSubject.revision,
              )}/${resourcePath}`}
            >
              Blame
            </Link>
          </Menu.Item>
        )}

        <Menu.Item>
          <Link
            to={`/${pathResource.fullPath}/commits/${utils.revisionEncodeURI(
              resourceSubject.revision,
            )}/${resourcePath}`}
          >
            {intl.get({
              id: 'code-assets.content.dialog.otherOption.History',
              defaultMessage: '历史',
            })}
          </Link>
        </Menu.Item>
        {renderType === 'TEXT' && !isDisabledDownload && (
          <Menu.Item>
            <HrefLink
              href={`/${pathResource.fullPath}/raw/${utils.revisionEncodeURI(
                resourceSubject.revision,
              )}/${resourcePath}`}
              target="_blank"
              rel="noreferrer"
            >
              {intl.get({
                id: 'code-assets.content.dialog.otherOption.RawFile',
                defaultMessage: '原始文件',
              })}
            </HrefLink>
          </Menu.Item>
        )}

        <Menu.Item>
          <HrefLink
            href={`/${pathResource.fullPath}/blob/${lastCommit.id}/${resourcePath}`}
            target="_blank"
            rel="noreferrer"
          >
            {intl.get({
              id: 'code-assets.content.dialog.otherOption.FixedAddress',
              defaultMessage: '固定地址',
            })}
          </HrefLink>
        </Menu.Item>
      </Menu>
    );
  };

  render() {
    const { dropdownVisible } = this.state;

    return (
      <Dropdown
        trigger={
          <div style={{ height: 24 }}>
            <Tooltip
              active={!dropdownVisible}
              trigger={
                <ButtonIcon
                  name="more-line"
                  className="file-icon-margin-left"
                  style={{ marginLeft: 10 }}
                />
              }
              align="tr"
            >
              {intl.get({
                id: 'code-assets.content.dialog.otherOption.MoreOperations',
                defaultMessage: '更多操作',
              })}
            </Tooltip>
          </div>
        }
        triggerType="click"
        onVisibleChange={(value) => {
          this.setState({
            dropdownVisible: value,
          });
        }}
        visible={dropdownVisible}
        align="tr br"
      >
        {this.menu()}
      </Dropdown>
    );
  }
}
